<!-- 商圈管理 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="() => { searchData= {} }" searchConditionNum="6">
        <gz-text-up v-model:value="searchData['mchNo']" :placeholder="'活动编号'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="searchData['type']" placeholder="活动平台">
            <a-select-option value="">
              全部
            </a-select-option>
            <a-select-option value="1">
              支付宝
            </a-select-option>
            <a-select-option value="2">
              微信
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="searchData['state']" placeholder="活动状态">
            <a-select-option value="">
              全部
            </a-select-option>
            <a-select-option value="0">
              未开始
            </a-select-option>
            <a-select-option value="1">
              进行中
            </a-select-option>
            <a-select-option value="2">
              已结束
            </a-select-option>
          </a-select>
        </a-form-item>
      </GzSearchForm>
      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
        row-key="groupId"
        scrollX="800px"
      >

        <template #bodyCell="{ column, record }"> 
          <template v-if="column.key === 'operation'">
            <a-button @click="viewFun(record.actNo)" type="link">查看</a-button>
          </template>
          
        </template>
      </GzTable>
    </a-card>
  </page-header-wrapper>

</template>

<script lang="ts" setup>

import { API_URL_MARKETING_LIST, API_URL_MARKETING_PROXY_LIST,req } from '@/api/manage'
import { ref, reactive, getCurrentInstance ,onMounted} from 'vue'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

// 商圈类型--查看下属商圈
const props = defineProps({
  sqlxNo: { type: String, default: '' }
})

const infoTableRef = ref()
let tableColumns = reactive([
  { title: '序号', dataIndex: 'index',width: 70, 
    customRender: ({ index }: { index: number }) => {
        return `${index + 1}`
    },
  },
  { key: 'actNo', title: '活动编号', dataIndex: 'actNo' },
  { key: 'sTime', title: '活动开始时间', dataIndex: 'sTime' },
  { key: 'eTime', title: '活动结束时间', dataIndex: 'eTime' },
  { key: 'budget', title: '活动预算', dataIndex: 'budget'},
  { key: 'state', title: '活动状态', dataIndex: 'state'},
  { key: 'operation', title: '活动规则明细', width: 120, fixed: 'right', align: 'center'}
])

function searchFunc() {
  infoTableRef.value.refTable(true)
}

const searchData = ref({})
// 请求table接口数据
function reqTableDataFunc(params: any) {
  // var obj=Object.assign(params,{proxyNo:useUserStore().userInfo.belongInfoId})// 机构号
  // return req.list(API_URL_MARKETING_LIST, obj)
  return Promise.resolve({
    total: 1,
    records:[
      {
        actNo:'001',
        sTime:'2023-12-08 11:20:22',
        eTime:'2023-12-08 11:20:22',
        state:'1',
        budget: 10000
      }
    ]
  })
}

function viewFun(id) {
  $infoBox.message.success('查看活动规则')
  console.log('viewFun',id)
}

onMounted(() => {
  if(props.sqlxNo) searchData['sqlxText'] = props.sqlxNo
})

</script>
